<!-- 搜索页 -->
<style scoped>
.top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
}

input {
    border-radius: 20px;
    padding-left: 10px;
}

.backspacing {
    width: 25px;
    height: 25px;
}

.input {
    width: 80%;
    height: 40px;
}

.Scenic_name {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 5%;
    align-items: baseline;
}

.right_img {
    width: 25px;
    height: 25px;
}

.scenic_div {
    display: flex;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scenic_area {
    width: 25px;
    text-align: center;
}

.particulars {
    width: 80%;
    /* display: flex;
    justify-content: left; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

<template>
    <div>
        <div class="top">
            <img src="../assets/zuoz.png" alt="" class="backspacing" @click="BACK" />
            <input type="text" placeholder="输入商家、商品名称" class="input" v-model="searchQuery" @input="search" />
        </div>

        <div class="Scenic_name" v-for="item in filteredData" :key="item.id">
            <div class="scenic_div">
                <p class="scenic_area">景区</p>
                <div class="scenic_area">-</div>
                <div class="particulars">{{ item.name }}</div>
            </div>
            <img src="../assets/right.png" alt="" class="right_img" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { NoticeBar } from "vant";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const searchQuery = ref("");

import axios from "axios";

function BACK() {
    router.push({
        name: "home",
    });
}

// 最大数组
let array = ref([]);
const data = ref([]);
const urr = ref([]);

// 景区列表
axios({
    url: "https://wwz.jingyi.icu/app/Scenic/index",
    method: "post",
    data: {},
})
    .then((arr) => {
        console.log(arr);
        data.value = arr.data.data;
        console.log(data.value);
        var data1 = arr.data.data.map(function (item) {
            return {
                name: item.name,
                id: item.id,
                type: 1,
            };
        });
        console.log(data1);
        array = array.concat(data1);
        console.log(array);
    })
    .catch((err) => {
        console.log(err);
    });

// 游记列表
axios({
    url: "https://wwz.jingyi.icu/app/Travels/index",
    method: "post",
    data: {},
})
    .then((orr) => {
        console.log(orr);
        urr.value = orr.data.data;
        console.log(urr.value);
        var data2 = orr.data.data.map(function (item) {
            return {
                name: item.content,
                id: item.id,
                type: 2,
            };
        });
        console.log(data2);
        array = array.concat(data2);
        console.log(array);
    })
    .catch((err) => {
        console.log(err);
    });

// 使用computed属性来计算过滤后的数据（如果你想要实时显示搜索结果）
const filteredData = computed(() => {
    return data.value.filter((item) => {
        return item.name.toLowerCase().includes(searchQuery.value.toLowerCase());
    });
});

// 搜索方法（如果你想要在特定事件上触发搜索，如点击搜索按钮）
function search() {
    // 在这里，你可以执行更复杂的搜索逻辑，但在这个例子中我们只是更新filteredData（如果它是响应式的）
    // 由于我们使用了computed属性，所以filteredData会自动更新
}

// 如果你想要监听searchQuery的变化并做一些额外的处理（可选）
watch(searchQuery, (newValue, oldValue) => {
    // 当searchQuery变化时，这里可以执行额外的逻辑
    // 但由于我们已经使用了computed属性，所以这里可能不需要额外的处理
    console.log("Search query changed:", newValue);
});
</script>
